<template>
  <div class="box">
    <top></top>
    <menus class="caidan_m"></menus>
    <div class="mine">
      <div class="w1398">
        <menus class="caidan_p"></menus>
        <div class="right">
          <h2>收录申请</h2>
          <p>
            以下所有项均为
            <span>必填项</span>，请认真填写：
          </p>
          <div class="logo">
            <label for>网站LOGO：</label>
            <div class="file">
              <input type="file" id="file" />
            </div>
            <span>请上传100KB以内，jpg、png格式图片</span>
          </div>
          <span class="icon_logo icon">
            <i></i>请上传图片
          </span>
          <img id="showImg" src alt />
          <div class="www">
            <label for>输入网址：</label>
            <input type="text" placeholder="https://www.zhongyi9999.com" v-model="url" id="url" />
            <i class="icon_right"></i>
          </div>
          <span class="icon_www icon">
            <i></i>网址格式输入不合法
          </span>
          <div class="name">
            <label for>网站名称：</label>
            <input type="text" placeholder="例如：中亿财经网" v-model="urlName" id="username" />
            <i class="icon_right1"></i>
          </div>
          <span class="icon_name icon">
            <i></i>网址名称输入不合法
          </span>
          <div class="industry">
            <label for>行业分类：</label>
            <select id="list1" v-on:change="indexSelect01($event)" class="select" v-model="indexId">
              <option disabled>请选择行业</option>
              <option
                v-for="(item,index) in select01"
                :key="index"
                :value="item.stid"
              >{{item.class_name}}</option>
            </select>
            <select
              class="select"
              v-model="indexId2"
              id="list2"
              v-on:change="indexSelect02($event)"
            >
              <!-- <option value="选择二级菜单" disabled>选择二级分类</option> -->
              <option
                v-for="(item,index) in select02"
                :key="index"
                :value="item.class_id"
              >{{item.class_name}}</option>
            </select>
          </div>
          <span class="icon_industry icon">
            <i></i>请选择行业分类
          </span>
          <div class="usertel">
            <label for>联系方式：</label>
            <input type="text" placeholder="手机号/邮箱" v-model="usertel" id="usertel" />
            <i class="icon_right2"></i>
          </div>
          <span class="icon_usertel icon">
            <i></i>联系方式输入不合法
          </span>
          <div class="describe">
            <label for>网站描述：</label>
            <textarea
              name
              id="describe"
              cols="30"
              rows="10"
              placeholder="请简单介绍您的网站，字数请控制在24字以内"
              v-model="describe"
            ></textarea>
            <i class="icon_right3"></i>
          </div>
          <span class="icon_describe icon">
            <i></i>网站描述输入不合法
          </span>
          <h3>九财导航收录原则：</h3>
          <p class="p1 text_p">1.不收录有反动、色情、赌博等不良内容或提供不良内容链接的网站，以及网站名称或内容违反国家有关法规的网站；</p>
          <p class="p2 text_p">2.不收录无实用内容的网站（如网站正在建设中，尚无完整内容），不收录涉及内容版权问题的网站（含音乐、影视、小说等）；</p>
          <p class="p3 text_p">3.不收录含有病毒、木马，弹出插件或恶意更改他人电脑设置的网站及有多个弹窗广告的网站；</p>
          <p class="p4 text_p">4.对挂靠别人的网站下的网站 ( 即没有自己单独域名的网站 ) ，本站将不予收录；</p>
          <p class="p5 text_p">5.不收录在正常情况下无法正常连接或浏览的网站；</p>
          <p class="p6 text_p">6.本站保留收录决定权以及在本站网址数据库中相关内容的编辑决定权；</p>
          <p class="p7 text_p">7.本站会定期检查所有网站，如发现收录的网站违背我们的收录标准和广大网民的喜好，我们将删除链接。</p>
          <div class="code">
            <label for>验证码：</label>
            <div class="verify-wrap" id="verify-wrap"></div>
          </div>
          <div class="confirm">
            <input type="button" value="确定提交" disabled="disabled" id="btn" @click="submit" />
            <!-- <button id="btn" disabled>确定提交</button> -->
          </div>
          <div class="footer">
            <label>* 特别说明：</label>
            <p>如果申请后两周内未被收录，说明网站还不符合收录条件。对于不符合收录条件的站点，我们将不会一一回复。您可自行处理已添加的友情链接。</p>
          </div>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>
<script>
import top from "@/components/top.vue";
import foot from "@/components/foot.vue";
import menus from "@/components/com/menus.vue";
export default {
  components: {
    top,
    foot,
    menus
  },
  data() {
    return {
      urlFlag: false,
      nameFlag: false,
      usertelFlag: false,
      describeFlag: false,
      flag: false,
      logo: "",
      url: "",
      urlName: "",
      // industry: "",
      usertel: "",
      describe: "",
      select01: [],
      select02: [],
      indexId: "",
      indexId2: "",
      indexNum: 0,
      img_base64: "",
      imgflag: false,
      industryFlag: false
    };
  },
  // computed: {
  //   selection: function() {
  //     for (var i = 0; i < this.firstList.length; i++) {
  //       if (this.firstList[i].text === this.industry) {
  //         console.log(this.firstList[i].text);
  //         return this.firstList[i].child;
  //       }
  //     }
  //   }
  // },
  created() {
    // 二级联动
    this.$http
      .get(this.GLOBAL.serverSrc + "/api/getTree", {
        params: {
          stid: 1
        }
      })
      .then(res => {
        console.log(res.data.data);
        this.select01 = res.data.data;
        // this.indexId = this.select01[0].class_name; //默认为0下标
        // this.select02 = this.select01[0].child;
      });

    // 验证码
    $(function() {
      // console.log(parseFloat("1px"));

      var SlideVerifyPlug = window.slideVerifyPlug;
      // 获取屏幕宽度
      var cw = document.body.clientWidth;
      // console.log(cw);
      if (cw > 600) {
        var slideVerify = new SlideVerifyPlug("#verify-wrap", {
          wrapWidth: "350", //设置 容器的宽度 ，默认为 350 ，也可不用设，你自己css 定义好也可以，插件里面会取一次这个 容器的宽度
          initText: "请按住滑块,向右拖动", //设置  初始的 显示文字
          sucessText: "验证通过", //设置 验证通过 显示的文字
          getSucessState: function(res) {
            //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
            // console.log(res);
            this.flag = true;
            if (res) {
              $("#btn").css("background", "rgb(76, 180, 247)");
              $("#btn").attr("disabled", false);
            }
          }
        });
      } else {
        var slideVerify = new SlideVerifyPlug("#verify-wrap", {
          wrapWidth: "200", //设置 容器的宽度 ，默认为 350 ，也可不用设，你自己css 定义好也可以，插件里面会取一次这个 容器的宽度
          initText: "请按住滑块，向右拖动", //设置  初始的 显示文字
          sucessText: "验证通过", //设置 验证通过 显示的文字
          getSucessState: function(res) {
            //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
            console.log(res);
            if (res) {
              $("#btn").css("background", "rgb(76, 180, 247)");
              $("#btn").attr("disabled", false);
            }
          }
        });
      }
      // window.onresize = function() {
      //   cw = document.body.clientWidth;
      //   console.log(cw);

      //   if (cw > 600) {
      //     var slideVerify = new SlideVerifyPlug("#verify-wrap", {
      //       wrapWidth: "350", //设置 容器的宽度 ，默认为 350 ，也可不用设，你自己css 定义好也可以，插件里面会取一次这个 容器的宽度
      //       initText: "请按住滑块，向右拖动", //设置  初始的 显示文字
      //       sucessText: "验证通过", //设置 验证通过 显示的文字
      //       getSucessState: function(res) {
      //         //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
      //         console.log(res);
      //         if (res) {
      //           $("#btn").css("background", "rgba(76, 180, 247, 1)");
      //           $("#btn").attr("disabled", false);
      //         }
      //       }
      //     });
      //   } else {
      //     var slideVerify = new SlideVerifyPlug("#verify-wrap", {
      //       wrapWidth: "200", //设置 容器的宽度 ，默认为 350 ，也可不用设，你自己css 定义好也可以，插件里面会取一次这个 容器的宽度
      //       initText: "请按住滑块，向右拖动", //设置  初始的 显示文字
      //       sucessText: "验证通过", //设置 验证通过 显示的文字
      //       getSucessState: function(res) {
      //         //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
      //         console.log(res);
      //         if (res) {
      //           $("#btn").css("background", "rgba(76, 180, 247, 1)");
      //           $("#btn").attr("disabled", false);
      //         }
      //       }
      //     });
      //   }
      // };
      $("#resetBtn").on("click", function() {
        slideVerify.resetVerify(); //可以重置 插件 回到初始状态
      });
      $("#getState").on("click", function() {
        alert(slideVerify.slideFinishState); //这个可以拿到 当前验证状态  是否完成
      });
      var slideVerify2 = new SlideVerifyPlug("#verify-wrap2", {
        wrapWidth: "300",
        initText: "请按住滑块",
        sucessText: "验证通过"
      });
      $("#resetBtn2").on("click", function() {
        slideVerify2.resetVerify();
      });
      $("#getState2").on("click", function() {
        alert(slideVerify2.slideFinishState);
      });
    });
    (function(global, factory) {
      typeof exports === "object" && typeof module !== "undefined"
        ? (module.exports = factory())
        : typeof define === "function" && define.amd
        ? define(factory)
        : (window.slideVerifyPlug = factory());
    })(this, function() {
      "use strict";

      var SlideVerify = function(ele, opt) {
        this.$ele = $(ele);
        //默认参数
        this.defaults = {
          wrapWidth: "350",
          initText: "请按住滑块，拖动到最右边",
          sucessText: "验证通过",
          getSucessState: function() {}
        };

        this.settings = $.extend({}, this.defaults, opt);
        this.touchX = 0;
        this.slideFinishState = false;
        this.init();
      };
      SlideVerify.prototype = {
        constructor: SlideVerify,
        init: function() {
          var _this = this;
          _this.initDom();
          _this.initStyle();
          _this.initEle();
          _this._mousedown();
          _this._mouseup();
          _this._touchstart();
          _this._touchmove();
          _this._touchend();
        },
        initDom: function() {
          var html = $(
            '<div class="drag-progress dragProgress">' +
              "</div>" +
              '<span class="drag-btn dragBtn">' +
              "</span>" +
              '<span class="fix-tips fixTips">' +
              this.settings.initText +
              "</span>" +
              '<span class="verify-msg sucMsg">' +
              this.settings.sucessText +
              "</span>"
          );
          this.$ele.append(html);
        },
        initStyle: function() {
          this.$ele.css({
            width: this.settings.wrapWidth
          });
        },
        initEle: function() {
          this.slideBtn = this.$ele.find(".dragBtn");
          this.slideProEle = this.$ele.find(".dragProgress");
          this.slideSucMsgEle = this.$ele.find(".sucMsg");
          this.slideFixTipsEle = this.$ele.find(".fixTips");
          this.maxSlideWid = this.calSlideWidth();
        },
        _mousedown: function() {
          var _this = this;

          _this.slideBtn.on("mousedown", function(e) {
            var distenceX = e.pageX;
            e.preventDefault();
            if (_this.ifSlideRight() || _this.ifAnimated()) {
              return false;
            }
            $(document).mousemove(function(e) {
              var curX = e.pageX - distenceX;
              if (curX >= _this.maxSlideWid) {
                _this.setDragBtnSty(_this.maxSlideWid);
                _this.setDragProgressSty(_this.maxSlideWid);
                _this.cancelMouseMove();
                _this.slideFinishState = true;
                //				    	$("#verify-msg").text('验证通过');
                if (_this.settings.getSucessState) {
                  _this.settings.getSucessState(_this.slideFinishState);
                }
                _this.successSty();
              } else if (curX <= 0) {
                _this.setDragBtnSty("0");
                _this.setDragProgressSty("0");
              } else {
                _this.setDragBtnSty(curX);
                _this.setDragProgressSty(curX);
              }
            });
            $(document).mouseup(function() {
              _this.cancelMouseMove();
            });
          });
        },
        _mouseup: function() {
          var _this = this;
          $(document).on("mouseup", function() {
            if (_this.ifSlideRight()) {
              _this.cancelMouseMove();
              return false;
            } else {
              _this.failAnimate();
            }
          });
        },
        _touchstart: function() {
          var _this = this;
          _this.slideBtn.on("touchstart", function(e) {
            _this.touchX = e.originalEvent.targetTouches[0].pageX;
            if (_this.ifSlideRight() || _this.ifAnimated()) {
              //					_this.cancelTouchmove();
              return false;
            }
          });
        },
        _touchmove: function() {
          var _this = this;
          _this.slideBtn.on("touchmove", function(e) {
            e.preventDefault();
            var curX = e.originalEvent.targetTouches[0].pageX - _this.touchX;
            if (curX >= _this.maxSlideWid) {
              _this.setDragBtnSty(_this.maxSlideWid);
              _this.setDragProgressSty(_this.maxSlideWid);
              _this.cancelTouchmove();
              _this.successSty();
              _this.slideFinishState = true;
              if (_this.settings.getSucessState) {
                _this.settings.getSucessState(_this.slideFinishState);
              }
              _this.slideFinishState = true;
            } else if (curX <= 0) {
              _this.setDragBtnSty("0");
              _this.setDragProgressSty("0");
            } else {
              _this.setDragBtnSty(curX);
              _this.setDragProgressSty(curX);
            }
          });
        },
        _touchend: function() {
          var _this = this;
          _this.slideBtn.on("touchend", function() {
            if (_this.ifSlideRight()) {
              _this.cancelTouchmove();
              return false;
            } else {
              _this.failAnimate();
            }
          });
        },
        getDragBtnWid: function() {
          //获取滑块的宽度，
          return parseFloat(this.slideBtn.outerWidth());
        },
        getDragWrapWid: function() {
          //获取  本容器的的宽度，以防万一
          return parseFloat(this.$ele.outerWidth());
        },
        calSlideWidth: function() {
          var _this = this;
          return _this.getDragWrapWid() - _this.getDragBtnWid();
        },
        ifAnimated: function() {
          //判断 是否动画状态
          return this.slideBtn.is(":animated");
        },
        getDragBtnLeft: function() {
          //判断当前 按钮 离左侧的距离
          return parseInt(this.slideBtn.css("left"));
        },
        ifSlideRight: function() {
          var _this = this;
          if (_this.getDragBtnLeft() == _this.calSlideWidth()) {
            return true;
          } else {
            return false;
          }
        },
        setDragBtnSty: function(left) {
          this.slideBtn.css({
            left: left
          });
        },
        setDragProgressSty: function(wid) {
          this.slideProEle.css({
            width: wid
          });
        },
        cancelMouseMove: function() {
          $(document).off("mousemove");
        },
        cancelTouchmove: function() {
          this.slideBtn.off("touchmove");
        },
        successSty: function() {
          this.slideSucMsgEle.show();
          this.slideBtn.addClass("suc-drag-btn");
        },
        failAnimate: function() {
          this.slideBtn.animate(
            {
              left: "-1px"
            },
            200
          );
          this.slideProEle.animate(
            {
              width: 0
            },
            200
          );
        },
        resetVerify: function() {
          this.slideSucMsgEle.hide();
          this.slideBtn.removeClass("suc-drag-btn");
          this.slideFinishState = false;
          this.slideProEle.css({
            width: 0
          });
          this.slideBtn.css({
            left: "-1px"
          });
          this._touchmove();
        }
      };
      var inlineCss =
        "*{margin:0;padding:0;box-sizing:border-box}.verify-wrap{width:350px;height:40px;background-color:#e5e5e5;border:1px solid #e0e0e0;margin:5px auto;position:relative}.verify-wrap .drag-btn{position:absolute;left:-1px;top:-1px;width:50px;height:40px;background:#fff url() no-repeat center center;background-size:100% 100%;z-index:2;cursor:move;}.verify-wrap .suc-drag-btn{background:#fff url() no-repeat center center;background-size:100% 100%}.verify-wrap .drag-progress{position:absolute;left:0;top:-1px;height:40px;border-top:1px solid #7ac23c;border-top:1px solid #7ac23c;width:0;background-color:#7ac23c;color:#fff;font-size:18px;text-align:center;line-height:40px}.verify-wrap .fix-tips,.verify-msg{width:100%;position:absolute;right:0;left:1px;height:100%;color:#51555c;z-index:1;line-height:38px;font-size:12px;text-align:center}.verify-wrap .verify-msg{background-color:#7ac23c;color:#fff;display:none}";
      var styleObj = $('<style type="text/css">' + inlineCss + "</style>");
      $("head").prepend(styleObj);

      var slideVerify = window.slideVerifyPlug || SlideVerify;

      return slideVerify;
    });
  },
  mounted() {
    var that = this;
    // $(".www input").blur(function(){})
    $("#file").on("change", function(e) {
      var filePath = $(this).val();
      // console.log(filePath);
      var fileFormat = filePath
        .substring(filePath.lastIndexOf("."))
        .toLowerCase(); //获取文件后缀名
      //检查后缀名
      if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
        alert("文件格式必须为：png/jpg/jpeg"); //showError是另外写的一个显示错误信息的function
        return;
      }
      //获取并记录图片的base64编码
      var reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]); // 读出 base64
      reader.onloadend = function() {
        $(".icon_logo").css("display", "none");
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        console.log(reader);
        var dataURL = reader.result; //base64
        that.img_base64 = dataURL;
        console.log(dataURL);
        that.logo = dataURL;
        // 显示图片
        $("#showImg").attr("src", dataURL);
      };
    });
    // 表单验证
    $("#url").blur(function() {
      console.log(666);
      var urlReg = /^(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$/; //网址地址
      if (urlReg.test(that.url)) {
        $(".icon_www").css("display", "none");
        that.urlFlag = true;
      } else {
        $(".icon_www").css("display", "block");
      }
    });
    $("#username").blur(function() {
      var nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
      if (nameReg.test(that.urlName)) {
        $(".icon_name").css("display", "none");
        that.nameFlag = true;
      } else {
        $(".icon_name").css("display", "block");
      }
    });
    $("#usertel").blur(function() {
      var usertelReg = /^1[3456789][0-9]{9}$/gi; //联系方式
      if (usertelReg.test(that.usertel)) {
        $(".icon_usertel").css("display", "none");
        that.usertelFlag = true;
      } else {
        $(".icon_usertel").css("display", "block");
      }
    });
    $("#describe").blur(function() {
      var nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
      if (nameReg.test(that.describe)) {
        $(".icon_describe").css("display", "none");
        that.describeFlag = true;
      } else {
        $(".icon_describe").css("display", "block");
      }
    });
  },
  methods: {
    // 行业二级分类
    indexSelect01(event) {
      console.log(event.target.value);
      this.indexId = event.target.value;
      console.log(this.indexId);
      let i = 0;
      for (i = 0; i < this.select01.length; i++) {
        if (this.select01[i].stid == this.indexId) {
          this.indexNum = i;
          break;
        }
      }
      console.log(this.indexNum);
      this.select02 = this.select01[this.indexNum].child;
      console.log(this.select02);
    },
    // 行业二级选择
    indexSelect02(event) {
      console.log(event.target.value);
      this.indexId2 = event.target.value;
      $(".icon_industry").css("display", "none");
    },
    submit() {
      if (this.indexId && this.indexId2) {
        this.industryFlag = true;
        $(".icon_industry").css("display", "none");
      } else {
        $(".icon_industry").css("display", "block");
      }
      // 图片判断
      // console.log(this.img_base64);
      if (this.img_base64) {
        this.imgflag = true;
      } else {
        $(".icon_logo").css("display", "block");
      }
      console.log(
        "logo" + this.logo,
        "url" + this.url,
        "urlName" + this.urlName,
        "usertel" + this.usertel,
        "describe" + this.describe,
        "indexId" + this.indexId,
        "indexId2" + this.indexId2
      );
      // 收录申请表单提交
      var nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/; //网址名称
      var urlReg = /^(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$/; //网址地址
      var usertelReg = /^1[3456789][0-9]{9}$/gi; //联系方式
      var describeReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/; //网站描述
      var that = this;
      if (!this.urlFlag) {
        $(".icon_www").css("display", "block");
      }
      if (!this.nameFlag) {
        $(".icon_name").css("display", "block");
      }
      if (!this.usertelFlag) {
        $(".icon_usertel").css("display", "block");
      }
      if (!this.describeFlag) {
        $(".icon_describe").css("display", "block");
      }
      if (urlReg.test(this.url)) {
        console.log(this.usertel);
        $(".icon_www").css("display", "none");
        $(".icon_right").css("display", "block");
        if (nameReg.test(this.urlName)) {
          $(".icon_name").css("display", "none");
          $(".icon_right1").css("display", "block");
          if (usertelReg.test(this.usertel)) {
            $(".icon_usertel").css("display", "none");
            $(".icon_right2").css("display", "block");
            if (describeReg.test(this.describe)) {
              $(".icon_describe").css("display", "none");
              $(".icon_right3").css("display", "block");
              if (this.industryFlag && this.img_base64) {
                $.ajax({
                  type: "POST",
                  url: "http://" + this.GLOBAL.serverSrc + "/api/addWebSide",
                  header: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  },
                  data: {
                    title: this.urlName,
                    logo: this.logo,
                    url: this.url,
                    stid: this.indexId,
                    class_id: this.indexId2,
                    tel: this.usertel,
                    description: this.describe,
                    keywords: "a,b"
                  },
                  dataType: "json",
                  success: function(data) {
                    console.log(data);
                    if (data.code == 200) {
                      console.log(666);

                      that.$message({
                        showClose: true,
                        message: "提交成功",
                        type: "success"
                      });
                      setTimeout(() => {
                        window.location.reload();
                      }, 2000);
                      // $(".image613").attr("src", data.data.qrCode);
                      // that.dialogFormVisible1 = true; //二维码弹框
                    } else {
                      that.$message({
                        showClose: true,
                        message: data.message,
                        type: "error"
                      });
                    }
                  }
                });
              }
            } else {
              $(".icon_describe").css("display", "block");
            }
          } else {
            $(".icon_usertel").css("display", "block");
          }
        } else {
          $(".icon_name").css("display", "block");
        }
      } else {
        $(".icon_www").css("display", "block");
      }
    }
  }
};
</script>

<style scoped>
@media screen and (min-width: 1024px) {
  .mine {
    /* height: 1271px; */
    background-color: #f1f4f9;
    padding-bottom: 20px;
  }
  .w1398 {
    width: 1398px;
    margin: auto;
    display: flex;
  }
  .caidan_m {
    display: none;
  }
  .caidan_p {
    width: 13%;
    text-align: center;
    margin-top: 40px;
  }
  .menu ul li {
    line-height: 50px;
  }
  .menu ul li:hover {
    color: red;
    background: url(../assets/image/icon_50.png) no-repeat 30px center;
  }
  .w1398 > .right {
    width: 1217px;
    /* height: 1193px; */
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    margin-top: 31px;
    padding-left: 40px;
    box-sizing: border-box;
    padding-right: 60px;
    padding-bottom: 20px;
  }
  .w1398 > .right h2 {
    font-size: 20px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    margin: 20px 0;
  }

  .right > p:nth-child(2) {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    text-indent: 35px;
  }
  .right p:nth-child(2) span {
    color: red;
  }
  .logo {
    text-indent: 35px;
    margin-top: 20px;
    overflow: hidden;
  }
  .logo label {
    float: left;
  }
  .logo .file {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
    position: relative;
    background: rgba(211, 232, 246, 1) url(../assets/image/icon_70.png)
      no-repeat 10px 10px;
    float: left;
  }
  .logo input {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    float: left;
  }
  .logo span {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    line-height: 40px;
  }
  .right > img {
    max-width: 380px;
    display: block;
    margin: 0 auto;
  }
  .www {
    text-indent: 35px;
    margin-top: 20px;
    position: relative;
  }
  .www input {
    width: 345px;
    height: 50px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
  }
  .name {
    text-indent: 35px;
    margin-top: 20px;
    position: relative;
  }
  .name input {
    width: 345px;
    height: 50px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
  }
  .industry {
    margin-top: 24px;
  }
  .industry label {
    margin-left: 35px;
  }
  /* .industry .el-select {
    width: 200px;
  } */
  .industry select {
    width: 200px;
    height: 48px;
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: rgba(241, 244, 249, 1) url(../assets/image/icon_xl.png)
      no-repeat 155px center;
    background-size: 12%;
    color: rgb(128, 128, 128);
  }
  .industry select option {
    height: 250px;
    padding: 20px 0;
  }
  .usertel {
    text-indent: 35px;
    margin-top: 24px;
    position: relative;
  }
  .usertel input {
    width: 345px;
    height: 50px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
  }

  label {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    margin-right: 10px;
  }
  .username {
    text-indent: 35px;
  }
  .username input {
    width: 345px;
    height: 50px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
  }
  .describe {
    text-indent: 35px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
  }
  .describe label {
    float: left;
  }
  .describe textarea {
    width: 660px;
    height: 95px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 18px;
    padding-top: 18px;
    box-sizing: border-box;
    float: left;
  }
  h3 {
    margin-top: 20px;
    font-size: 16px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
  }
  .text_p {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    text-indent: 35px;
  }

  .code {
    /* text-indent: 35px; */
    margin: 25px;
  }
  .code label {
    float: left;
  }
  .code .verify-wrap {
    display: inline-block;
    margin-top: 1px;
    /* margin-left: -39px; */
  }
  .confirm input {
    width: 153px;
    height: 48px;
    background: rgb(175, 179, 182);
    border-radius: 24px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
    margin: 16px 0 0 8px;
    border: none;
    cursor: pointer;
    outline: none;
    /* opacity: 0.5; */
  }
  .footer {
    overflow: hidden;
    margin-top: 35px;
  }
  .footer label {
    color: red;
    text-indent: 35px;
    float: left;
  }
  .footer p:nth-child(2) {
    width: 80%;
    float: left;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
  }
  .icon_logo {
    color: red;
    margin-left: 130px;
    display: none;
  }
  .icon_www {
    color: red;
    margin-left: 130px;
    display: none;
  }
  .icon_name {
    color: red;
    margin-left: 130px;
    display: none;
  }
  .icon_usertel {
    color: red;
    margin-left: 130px;
    display: none;
  }
  .icon_describe {
    color: red;
    margin-left: 130px;
    display: none;
  }
  .icon_industry {
    color: red;
    margin-left: 130px;
    display: none;
  }
  .icon i {
    display: inline-block;
    background: url(../assets/image/icon_22.png) no-repeat center center;
    background-size: 100%;
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .icon_right,
  .icon_right1,
  .icon_right2 {
    display: inline-block;
    background: url(../assets/image/icon_24.png) no-repeat center center;
    background-size: 100%;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 440px;
    top: 18px;
    display: none;
  }
  .icon_right3 {
    display: inline-block;
    background: url(../assets/image/icon_24.png) no-repeat center center;
    background-size: 100%;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 760px;
    top: 18px;
    display: none;
  }
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
  /* .caidan {
    width: 13%;
    text-align: center;
    margin-top: 40px;
  } */
  .caidan_p {
    display: none;
  }
  .mine {
    /* height: 10.5rem; */
    background-color: #f1f4f9;
    font-size: 0.16rem;
  }
  .w1398 {
    /* width: 1398px;
    margin: auto; */
    display: flex;
  }
  .verify-wrap {
    display: none;
  }
  .w1398 > .right {
    /* width: 77%; */
    /* height: 4.72rem; */
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    /* margin-top: 0.31rem; */
    padding-left: 0.4rem;
    box-sizing: border-box;
    margin: 3%;
    /* margin-bottom: 0.2rem; */
    padding-bottom: 0.2rem;
  }
  .w1398 > .right h2 {
    font-size: 0.2rem;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    margin: 0.2rem 0;
  }
  .w1398 > .right img {
    margin-bottom: 0.1rem;
    width: 2rem;
    display: block;
    margin: auto;
  }
  .w1398 > .right p {
    font-size: 0.16rem;
    line-height: 0.4rem;
  }

  .right > p:nth-child(2) {
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    text-indent: 0.35rem;
  }
  .right p:nth-child(2) span {
    color: red;
  }
  .logo {
    margin-top: 0.2rem;
    overflow: hidden;
  }
  .logo label {
    float: left;
    text-indent: 0.35rem;
  }
  .logo .file {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
    position: relative;
    background: rgba(211, 232, 246, 1) url(../assets/image/icon_70.png)
      no-repeat 0.08rem 0.08rem;
    float: left;
    background-size: 80%;
    margin-right: 0.2rem;
  }
  .logo .file span {
    display: inline-block;
    width: 2.6rem;
    margin-left: 0.2rem;
    text-indent: none;
  }

  .logo input {
    position: absolute;
    right: 0;
    top: 0;
    width: 0.45rem;
    height: 0.45rem;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    float: left;
  }
  .logo span {
    font-size: 0.14rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    line-height: 0.4rem;
  }
  .www {
    text-indent: 0.35rem;
    margin-top: 0.2rem;
  }
  .www input {
    width: 3.45rem;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }
  .name {
    text-indent: 0.35rem;
    margin-top: 0.2rem;
  }
  .name input {
    width: 3.45rem;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }
  .industry {
    text-indent: 0.35rem;
    margin-top: 0.2rem;
  }
  .industry select {
    width: 3.45rem;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.1rem;
    box-sizing: border-box;
    color: #7a7a7a;
  }
  #list2 {
    margin-left: 1.6rem;
    margin-top: 0.2rem;
  }
  .usertel {
    text-indent: 0.35rem;
    margin-top: 0.24rem;
  }
  .usertel input {
    width: 3.45rem;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }

  label {
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    margin-right: 0.1rem;
  }
  .username {
    text-indent: 0.35rem;
  }
  .username input {
    width: 3.45rem;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }
  .describe {
    text-indent: 0.35rem;
    margin: 0.2rem 0;
    overflow: hidden;
  }
  .describe label {
    float: left;
  }
  .describe textarea {
    width: 3.5rem;
    height: 0.95rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.26rem;
    padding-top: 0.18rem;
    box-sizing: border-box;
    float: left;
    padding-right: 0.18rem;
  }
  h3 {
    font-size: 0.16rem;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
  }
  .text_p {
    font-size: 0.14rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    text-indent: 0.35rem;
  }
  .right > p {
    padding-right: 0.2rem;
    box-sizing: border-box;
  }
  .code {
    /* text-indent: 0.35rem; */
    /* margin: 0.25rem; */
    overflow: hidden;
    margin-top: 0.25rem;
  }
  .code label {
    float: left;
    margin-top: 0.2rem;
  }
  .code .verify-wrap {
    display: inline-block;
    margin-top: 1px;
    /* margin-left: -0.39rem; */
  }
  .confirm input {
    width: 1.53rem;
    height: 0.48rem;
    background: rgb(187, 189, 190);
    border-radius: 0.24rem;
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 0.4rem;
    margin: 0.36rem 0 0 0.08rem;
    border: none;
    cursor: pointer;
    outline: none;
    /* opacity: 0.5; */
    display: block;
    margin: 0 auto;
    margin-top: 0.25rem;
  }
  .footer {
    overflow: hidden;
    margin-top: 0.35rem;
  }
  .footer label {
    color: red;
    /* text-indent: 0.35rem; */
    float: left;
  }
  .footer p:nth-child(2) {
    width: 70%;
    float: left;
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
  }
  .icon {
    color: red;
    margin-left: 0.2rem;
    font-size: 0.2rem;
    display: none;
    margin-left: 1.6rem;
  }
  .icon i {
    display: inline-block;
    background: url(../assets/image/icon_22.png) no-repeat center center;
    background-size: 100%;
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
</style>

